<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>权限控制 | MyWeb 4.x</title>
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="基于Vue + ElementUI 的web项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <link rel="preload" href="/my/assets/css/0.styles.d7ae9199.css" as="style"><link rel="preload" href="/my/assets/js/app.2b2365a7.js" as="script"><link rel="preload" href="/my/assets/js/535.c100cd07.js" as="script"><link rel="preload" href="/my/assets/js/1310.b0762541.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.d7ae9199.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyWeb 4.x" class="logo"> <span class="site-name can-hide">MyWeb 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>开发指南</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/my/guide/access.html" aria-current="page" class="active sidebar-link">权限控制</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/access.html#如何工作？" class="sidebar-link">如何工作？</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#功能点" class="sidebar-link">功能点</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#配置" class="sidebar-link">配置</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#实例方法" class="sidebar-link">实例方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/access.html#access-login-data" class="sidebar-link">$access.login(data)</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#access-get" class="sidebar-link">$access.get()</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#access-islogin" class="sidebar-link">$access.isLogin()</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#access-is-role-required" class="sidebar-link">$access.is(role, required)</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#access-has-can-required" class="sidebar-link">$access.has(can, required)</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#access-match-code" class="sidebar-link">$access.match(code)</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#access-logout" class="sidebar-link">$access.logout()</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#视图鉴权" class="sidebar-link">视图鉴权</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#路由守卫" class="sidebar-link">路由守卫</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/access.html#使用路由中间件功能" class="sidebar-link">使用路由中间件功能</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#中间件运行及原理" class="sidebar-link">中间件运行及原理</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#中间件语法" class="sidebar-link">中间件语法</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#自动创建路由配置写法" class="sidebar-link">自动创建路由配置写法</a></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#自定义路由守卫" class="sidebar-link">自定义路由守卫</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/guide/access.html#请求拦截" class="sidebar-link">请求拦截</a></li></ul></li><li><a href="/my/guide/app.html" class="sidebar-link">子应用微服务</a></li><li><a href="/my/guide/cmd.html" class="sidebar-link">脚本命令</a></li><li><a href="/my/guide/coder.html" class="sidebar-link">代码生成器</a></li><li><a href="/my/guide/config.html" class="sidebar-link">配置</a></li><li><a href="/my/guide/constant.html" class="sidebar-link">常量和静态配置</a></li><li><a href="/my/guide/extension.html" class="sidebar-link">内置实例扩展</a></li><li><a href="/my/guide/route.html" class="sidebar-link">自动配置路由</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>内置资源</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>进阶教程</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>第三方类库</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="权限控制"><a href="#权限控制" class="header-anchor">#</a> 权限控制</h1> <p>权限控制是<code>My</code>框架的重要组成模块，提供了接口请求拦截、路由守卫、视图控制等全方位的细粒度的鉴权配置。</p> <h2 id="如何工作？"><a href="#如何工作？" class="header-anchor">#</a> 如何工作？</h2> <p>在启动Vue应用的同时，会实例化一个<code>Access</code>实例，在后续操作过程中，调用<code>$access.login({roles, can, token}})</code> 、 <code>$access.setRole(roles)</code>或使用<code>$access.setCan(can)</code>再重新设置角色及权限。当然这些都是响应式的，也就是说，你的视图会随着以上变更发生变化。</p> <h2 id="功能点"><a href="#功能点" class="header-anchor">#</a> 功能点</h2> <ul><li>鉴权： <code>Access</code> 提供了基本的鉴权，如：<code>$access.is('角色')</code>，<code>$access.has('能力')</code>，<code>$access.isLogin()</code>。 通常用在对视图的控制。</li> <li>请求拦截： 可以对发起的请求在请求头统一注入token， 统一判断请求响应授权情况跳转。</li> <li>路由守卫：根据路由配置的中间件处理路由页面进入条件，可以方便在路由中实现鉴权。</li></ul> <h2 id="配置"><a href="#配置" class="header-anchor">#</a> 配置</h2> <p><code>Access</code>可通过 <code>@/config.js</code> 做个性配置或功能的开启、关闭。如：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token keyword">set</span> <span class="token keyword">as</span> setConfig<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'$ui/config'</span>

<span class="token function">setConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 权限控制实例化配置 </span>
  access<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 启用请求权限控制</span>
    axios<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 启用路由权限控制</span>
    router<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// 缓存存储方式 session 或 local</span>
    storage<span class="token operator">:</span> <span class="token string">'session'</span><span class="token punctuation">,</span>
    <span class="token comment">// 登录页面路径</span>
    loginPath<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
    <span class="token comment">// 权限不足页面路径</span>
    authorizePath<span class="token operator">:</span> <span class="token string">'/403'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>完整的配置项包括</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// 缓存key</span>
  cacheKey<span class="token operator">:</span> <span class="token string">'__MY_ACCESS__'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 缓存存储方式 session 或 local</span>
  storage<span class="token operator">:</span> <span class="token string">'session'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 启用请求拦截</span>
  axios<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 登录页面路径</span>
  loginPath<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 登录页面是路由，false表示url模式</span>
  loginPathIsRoute<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 权限不足页面路径</span>
  authorizePath<span class="token operator">:</span> <span class="token string">'/403'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 权限不足页面是路由</span>
  authorizePathIsRoute<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  
  <span class="token comment">// token注入请求头的名称</span>
  authorization<span class="token operator">:</span> <span class="token string">'Authorization'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 请求拦截函数，axios=true 有效</span>
  request<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 请求响应成功拦截函数，axios=true 有效</span>
  response<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 请求响应失败拦截函数，axios=true 有效</span>
  responseFail<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 启用路由守卫</span>
  router<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  
  <span class="token comment">// VueRouter实例</span>
  $router<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 前置路由守卫</span>
  beforeEach<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 后置路由守卫</span>
  afterEach<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 中间件名称分隔符</span>
  nameSplit<span class="token operator">:</span> <span class="token string">':'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 中间件参数个数分隔符</span>
  paramSplit<span class="token operator">:</span> <span class="token string">','</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 中间件参数值列表分隔符</span>
  argSplit<span class="token operator">:</span> <span class="token string">'|'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// can中间件的角色分隔符</span>
  canRoleSplit<span class="token operator">:</span> <span class="token string">'.'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 权限层级分隔</span>
  canParentSplit<span class="token operator">:</span> <span class="token string">'#'</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 路由加载进度控制</span>
  progress<span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br></div></div><h2 id="实例方法"><a href="#实例方法" class="header-anchor">#</a> 实例方法</h2> <h3 id="access-login-data"><a href="#access-login-data" class="header-anchor">#</a> $access.login(data)</h3> <p>写入登录信息，通常在用户登录成功时调用，写入角色、权限编码、token等用户信息。参数对象data选项</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  roles<span class="token operator">:</span> Array<span class="token punctuation">,</span> <span class="token comment">// 角色列表</span>
  can<span class="token operator">:</span> Array<span class="token punctuation">,</span> <span class="token comment">// 权限编码列表</span>
  token<span class="token operator">:</span> String <span class="token comment">// 登录token</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>其中 roles 与 can 必须要有一个，即可以用角色或权限编码鉴权，或两者同时使用。
可以传入其他自定义的数据项</p> <h3 id="access-get"><a href="#access-get" class="header-anchor">#</a> $access.get()</h3> <p>获取用户权限数据, 即 <code>$access.login(data)</code> 传入的数据</p> <h3 id="access-islogin"><a href="#access-islogin" class="header-anchor">#</a> $access.isLogin()</h3> <p>用户登录鉴权，判断当前用户是否已经登录</p> <h3 id="access-is-role-required"><a href="#access-is-role-required" class="header-anchor">#</a> $access.is(role, required)</h3> <p>用户角色鉴权，验证用户是否匹配该角色</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token comment">/**
   * 鉴权，是否有该角色
   * @param {string|string[]} role 角色或角色数组
   * @param {boolean} [required=false] 是否全匹配
   * @return {boolean}
   */</span>
  <span class="token function">is</span><span class="token punctuation">(</span><span class="token parameter">role<span class="token punctuation">,</span> required</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> roles <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">.</span>access<span class="token punctuation">.</span>roles
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>roles<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span>
    
    <span class="token keyword">const</span> matches <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>role<span class="token punctuation">)</span>
    <span class="token keyword">return</span> required
      <span class="token operator">?</span> matches<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token operator">=&gt;</span> roles<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token operator">:</span> matches<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token operator">=&gt;</span> roles<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="access-has-can-required"><a href="#access-has-can-required" class="header-anchor">#</a> $access.has(can, required)</h3> <p>用户权限编码鉴权，验证是否有改编码的权限</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token comment">/**
   * 鉴权，是否有该权限
   * @param {string|string[]} can 权限编码或编码数组
   * @param {boolean} [required=false] 是否全匹配
   * @return {boolean}
   */</span>
  <span class="token function">has</span><span class="token punctuation">(</span><span class="token parameter">can<span class="token punctuation">,</span> required</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> canArray <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">.</span>access<span class="token punctuation">.</span>can
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>canArray<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span>
    
    <span class="token keyword">const</span> matches <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>can<span class="token punctuation">)</span>
    <span class="token keyword">return</span> required
      <span class="token operator">?</span> matches<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token operator">=&gt;</span> canArray<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token operator">:</span> matches<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token operator">=&gt;</span> canArray<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="access-match-code"><a href="#access-match-code" class="header-anchor">#</a> $access.match(code)</h3> <p>用户权限编码父级鉴权，验证是否有该父级的编码</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token comment">/**
   * 匹配是否存在父级权限
   * @param {string} code 权限编码
   * @return {boolean}
   *
   * @example
   * match('menu') // 查询是否有 menu# 开头的权限编码， #是默认层级分隔符
   *
   */</span>
  <span class="token function">match</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> canArray <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">.</span>access<span class="token punctuation">.</span>can
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>canArray<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span>
    <span class="token keyword">return</span> canArray<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>code<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>canParentSplit<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="access-logout"><a href="#access-logout" class="header-anchor">#</a> $access.logout()</h3> <p>注销登录，清空登录信息，并跳转到登录页面</p> <h2 id="视图鉴权"><a href="#视图鉴权" class="header-anchor">#</a> 视图鉴权</h2> <p>在模板使用<code>v-if</code> <code>v-show</code> 指令 或按钮的<code>disabled</code>属性控制，如：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$access.is('admin')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$access.has('update')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>!$access.has('update')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="路由守卫"><a href="#路由守卫" class="header-anchor">#</a> 路由守卫</h2> <h3 id="使用路由中间件功能"><a href="#使用路由中间件功能" class="header-anchor">#</a> 使用路由中间件功能</h3> <p><code>Access</code> 默认提供了登录，鉴权中间件，使用路由相关功能，也比较简单。只需要在路由中<code>meta</code>中，添加<code>access</code>字段，是数组类型。如：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span><span class="token keyword">get</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      meta<span class="token operator">:</span> <span class="token punctuation">{</span>
        access<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'login'</span><span class="token punctuation">,</span> <span class="token string">'can:add|update'</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="中间件运行及原理"><a href="#中间件运行及原理" class="header-anchor">#</a> 中间件运行及原理</h3> <p><code>Access</code>路由中间件是基于<code>vue-router</code>的全局钩子<code>beforeEach</code>、<code>afterEach</code>。
与路由自带钩子的运行模式不同，路由中间件，是顺序执行的，前面中间件只有执行成功后，后续的中间件才可以继续执行。内部执行是基于 <code>ui/utils/queue</code></p> <h3 id="中间件语法"><a href="#中间件语法" class="header-anchor">#</a> 中间件语法</h3> <p><code>Access</code> 中内置了三个中间件，分别为：login、role、can</p> <p>中间件使用，例如格式如下：</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>name:args,args<span class="token punctuation">..</span><span class="token punctuation">..</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>name： 中间件名称</li> <li>args: 传给中间件的参数，多个参数以，隔开</li></ul> <p>示例：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code>access: <span class="token punctuation">[</span><span class="token string">'login'</span><span class="token punctuation">]</span>  // 需要登录访问
access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'role:administrator'</span><span class="token punctuation">]</span> // 需要登录，并且登录的用户角色是administrator
access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'role:administrator|teacher'</span><span class="token punctuation">]</span> // 需要登录，并且登录的用户角色是administrator或者是teacher
access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'role:administrator|teacher,true'</span><span class="token punctuation">]</span> // 需要登录，并且登录的用户角色是administrator并且是teacher
access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'can:add|update'</span><span class="token punctuation">]</span>  // 需要登录访问, 权限编码包含add 或 update
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>can中间件，通用是用来判断是否拥有某个权限或某一类权限，当然，也支持角色的判断。实际调用时，其实是通过$access上的can方法实现。示例如下</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code>access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'can:update_article'</span><span class="token punctuation">]</span>,    // 有更新文章的权限
access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'can:update_article|delete_article'</span><span class="token punctuation">]</span>,   // 有更新文章或删除文件的权限
access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'can:update_article|delete_article,true'</span><span class="token punctuation">]</span>, // 同时有更新及删除文章权限
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>有时，可能需要判断用户同时有某个角色或某些权限，组件role中件虽然可以实现，但是一个can中间件实现会更加简单。如下：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code>access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'can:admin.update_article'</span><span class="token punctuation">]</span>,  // 拥有管理员身份，且有update_article的权限
access: <span class="token punctuation">[</span><span class="token string">'login'</span>, <span class="token string">'can:admin.*|delete_article'</span><span class="token punctuation">]</span>, // 是管理员或有删除文章权限
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="自动创建路由配置写法"><a href="#自动创建路由配置写法" class="header-anchor">#</a> 自动创建路由配置写法</h3> <p>在vue单文件顶部写上</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>---
access:
- login
- role:admin
---
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="自定义路由守卫"><a href="#自定义路由守卫" class="header-anchor">#</a> 自定义路由守卫</h3> <p>如不想使用Access提供的中间件守卫功能，可以自定义 <code>beforeEach</code>  和 <code>afterEach</code> ，在配置中文件修改</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token keyword">set</span> <span class="token keyword">as</span> setConfig<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'$ui/config'</span>

<span class="token comment">// 写入运行时配置</span>
<span class="token function">setConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  
  access<span class="token operator">:</span> <span class="token punctuation">{</span>    
    <span class="token comment">// 启用路由权限控制</span>
    router<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    
    <span class="token function-variable function">beforeEach</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// 逻辑实现</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    
    <span class="token function-variable function">afterEach</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  mock<span class="token operator">:</span> <span class="token punctuation">{</span>
    timeout<span class="token operator">:</span> <span class="token string">'200-500'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="请求拦截"><a href="#请求拦截" class="header-anchor">#</a> 请求拦截</h2> <p>在token的模式，Access 在每个请求的请求头注入 Authorization，通过<code>config.js</code>对相关配置进行更改。</p> <p>如需要特殊拦截功能，可以配置</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  
  <span class="token comment">// 请求拦截函数，axios=true 有效</span>
  <span class="token function-variable function">request</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>access<span class="token punctuation">}</span><span class="token punctuation">,</span> options<span class="token punctuation">,</span> config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在这里实现对请求前的处理</span>
    <span class="token keyword">return</span> config
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 请求响应成功拦截函数，axios=true 有效</span>
  <span class="token function-variable function">response</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>$router<span class="token punctuation">}</span><span class="token punctuation">,</span> options<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在这里实现响应后的处理</span>
    <span class="token keyword">return</span> res
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  
  <span class="token comment">// 请求响应失败拦截函数，axios=true 有效</span>
  responseFail<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/my/guide/app.html">
        子应用微服务
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.2b2365a7.js" defer></script><script src="/my/assets/js/535.c100cd07.js" defer></script><script src="/my/assets/js/1310.b0762541.js" defer></script>
  </body>
</html>
